<template>
  <div class="topicLis">
    <h3>专题精选</h3>
    <van-swipe :loop="false" :width="300" :show-indicators='false'>
      
      <van-swipe-item v-for="item in topicListArr" :key="item.id" >
        <div class="box">
          <img :src="item.item_pic_url" alt="" srcset="" />
          <p class="p1">{{ item.title }}
            <span style="  color: red;">{{item.price_info | formatMoney}}</span>
          </p>
          <p class="p2">{{ item.subtitle }}</p>
        </div>
      </van-swipe-item>
      
    </van-swipe>
  </div>
</template>
<script>
export default {
  name: "TopicList",
  props: ["topicListArr"],
  data() {
    return {};
  },
  components: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {},
};
</script>
<style scoped lang='less'>
.topicLis {
  
   box-sizing: border-box;
    h3{
         text-align: center;
    background-color: white;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #000000;
    padding-bottom: 10px;
    font-weight:900;
    }
  .box{
    // display: flex;
     margin-left: 15px;
    height: auto;
    padding-bottom: 10px;
    background-color: #fff;
    padding-right: 9px;
img {
    display: block;
    width: 100%;
    height: 200px;
   
  }
  .p1,.p2{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 95%;
    font-size: 16px;
    padding-top: 10px;
  }
  // .p2{
  //       text-overflow: ellipsis;
  //   overflow: hidden;
  //   white-space: nowrap;
  //   width: 92%;
  //   font-size: 16px;
  //   padding-top: 10px;
    
  // }
  }

}
</style>